<template>
  <div class="login-container">
    <img src="@/assets/daike.png"
         alt=""
         srcset="">
    <van-cell-group class="box">
      <van-field v-model="account"
                 required
                 clearable
                 label="用户名"
                 right-icon="question-o"
                 placeholder="请输入用户名"
                 @click-right-icon="$toast('question')" />

      <van-field v-model="password"
                 type="password"
                 label="密码"
                 placeholder="请输入密码"
                 @keyup.enter='handleLogin'
                 @keyup.enter.native='handleLogin'
                 required />
      <van-field v-model="rePassword"
                 type="password"
                 label="密码"
                 v-if="!isLogin"
                 placeholder="请重复输入密码"
                 required />
    </van-cell-group>
    <van-row>
      <van-button size="small"
                  @click="handleRegister"
                  type="primary">{{isLogin?'注册':'已有账号'}}</van-button>
      <van-button @click="handleLogin"
                  size='small'
                  type="info">{{isLogin?'登陆':'注册并登陆'}}</van-button>
    </van-row>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      isLogin: true,
      account: '',
      password: '',
      rePassword: ''
    }
  },
  methods: {
    // //这里的...是超引用，ES6的语法，意思是state里有多少属性值我可以在这里放多少属性值
    ...mapMutations(['SET_USER']),
    showLoginTip () {
      this.$toast.loading({
        mask: true,
        forbidClick: false, // 禁用背景点击
        message: '登录中...'
      })
    },
    handleRegister () {
      this.isLogin = !this.isLogin
    },
    login () {
      this.$http.login({
        account: this.account,
        password: this.password
      }).then(res => {
        this.$toast.clear()
        this.SET_USER(res.data)
        this.$router.push('/home')
      }).catch(err => {
        console.log(err)
        this.$toast('登陆失败')
      })
    },
    handleLogin () {
      if (this.account === '') {
        this.$toast('账号不能为空')
        return false
      } else if (this.password === '') {
        this.$toast('密码不能为空')
        return false
      } else {
        if (this.isLogin) {
          this.showLoginTip()
          this.login()
        } else {
          if (this.password !== this.rePassword) {
            this.$toast.fail('两次密码输入不一致')
            return false
          } else {
            this.showLoginTip()
            this.$http.register({
              account: this.account,
              password: this.password
            }).then(res => {
              this.$toast.clear()
              this.SET_USER(res.data)
              this.$router.push('/home')
            }).catch(err => {
              console.log(err)
              this.$toast.clear()
            })
          }
        }
      }
    }
  }
}
</script>

 <style lang="sass" scoped>
.login-container
  display: flex
  justify-content: center
  align-items: center
  flex-direction: column
  img
    width: 300px
    margin: 100px 0 20px
  .box
    width: 280px
    margin-bottom: 20px
</style>
